<template>
	<view style="position: fixed;z-index: 100; right:10rpx" :style="{top:top}" v-if="show">
		<view class="arrow" :style="{textIndent: textIndent}">
			<u-icon name="arrow-up-fill"></u-icon>
		</view>
		<view class="main">
			<view class="text">点击 ··· 可以对作品进行分享。弹幕可以在个人中心设置界面关闭</view>
			<view class="button" hover-class="hbutton" @click="but">不再提醒</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ind-prompt",
		data() {
			return {
				textIndent: null,
				show: false,
				top: null
			}
		},
		created() {
			const menu = uni.getMenuButtonBoundingClientRect()
			this.top = menu.bottom + 'px'
			this.textIndent = `calc(320rpx-${menu.width}px)`
			const prompt = uni.getStorageSync('prompt')
			if (prompt) return
			this.show = !prompt.show
		},
		methods: {
			but() {
				uni.setStorageSync('prompt', {
					show: false
				})
				this.show = false
			}
		}
	}
</script>

<style scoped>
	.button {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #71d5a1;
	}

	.hbutton {
		background-color: #DBF1E1;
	}

	.arrow {
		color: #333333;
		text-indent: 100rpx;
		height: 30rpx;
		line-height: 40rpx;
	}

	.text {
		color: #FFFFFF;
		text-align: justify;
		padding: 20rpx;
		font-size: 26rpx;
	}

	.main {
		width: 320rpx;
		background-color: #333333;
		border-radius: 8rpx;
		overflow: hidden;
	}
</style>
